import React, { useRef, useState, useEffect } from 'react'
import { Modal, Form, InputNumber, Input } from 'antd'
import PropTypes from 'prop-types'
import { CaseContext } from '../context'
import { strToNum } from '@src/assets/js/tool'
const { Item } = Form
const { TextArea } = Input

// 改变值
function changeValue (param, value, formRef) {
  const current = formRef.current
  current.setFieldsValue({
    [param]: value
  })
  computeAndSetFee(formRef)
}

function computeAndSetFee (formRef) {
  const current = formRef.current
  const feeAcceptance = current.getFieldValue('fee_acceptance') || 0
  const feeProcessing = current.getFieldValue('fee_processing') || 0
  current.setFieldsValue({
    fee: strToNum(feeAcceptance) + strToNum(feeProcessing)
  })
}

function Fee ({ value }) {
  return (
    <span>{value}</span>
  )
}

function Main ({ visible, hide, caseFormRef }) {
  const formRef = useRef(null)
  const [initialValues, setInitialValues] = useState({})
  useEffect(() => {
    if (!visible) {
      return
    }
    const c = caseFormRef.current
    const claim = c.getFieldValue(['claim'])
    setInitialValues({
      fee_acceptance: claim.fee_acceptance,
      fee_processing: claim.fee_processing,
      fee: claim.fee,
      log: claim.log
    })
  }, [visible, caseFormRef])
  return (
    <CaseContext.Consumer>
      {({ setFeeByLog }) => {
        const onFinish = (d) => {
          setFeeByLog(d)
          hide()
        }
        return (
          <Modal
            title='自定义仲裁费'
            open={visible}
            onOk={() => formRef.current.submit()}
            onCancel={hide}
            destroyOnClose
          >
            <Form ref={formRef} initialValues={initialValues} labelCol={{ flex: '100px' }} onFinish={d => onFinish(d)}>
              <Item label='受理费' name='fee_acceptance' rules={[{ required: true, message: '受理费不能为空' }]}>
                <InputNumber
                  style={{ width: '100%' }}
                  formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                  parser={value => value.replace(/¥\s?|(,*)/g, '')}
                  onChange={v => changeValue('fee_acceptance', v, formRef)}
                />
              </Item>
              <Item label='处理费' name='fee_processing' rules={[{ required: true, message: '处理费不能为空' }]}>
                <InputNumber
                  style={{ width: '100%' }}
                  formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                  parser={value => value.replace(/¥\s?|(,*)/g, '')}
                  onChange={v => changeValue('fee_processing', v, formRef)}
                />
              </Item>
              <Item label='应收金额' name='fee'>
                <Fee />
              </Item>
              <Item label='原因' name='log' rules={[{ required: true, message: '原因不能为空' }]}>
                <TextArea rows={3} />
              </Item>
            </Form>
          </Modal>
        )
      }}
    </CaseContext.Consumer>
  )
}

Main.propTypes = {
  visible: PropTypes.bool,
  hide: PropTypes.func,
  caseFormRef: PropTypes.object
}

Main.defaultProps = {
  visible: false,
  hide: () => {},
  caseFormRef: null
}

export default Main
